<template>
  <div class="user-inputer">
    <!-- <p>{{ userInput }}</p> -->
    <input
      type="text"
      placeholder="请输入待办事项"
      :value="userInput"
      v-debounce:input="{
        handler: (e) => (userInput = e.target.value),
        delay: 500,
      }"
    />

    <button @click="uploadUserInput">+</button>
  </div>
</template>

<script setup>
import { ref, defineEmits } from "vue";

const userInput = ref("");

const emit = defineEmits(["userInputOK"]);
const uploadUserInput = () => {
  emit("userInputOK", userInput.value);
};
</script>

<style lang="scss" scoped>
.user-inputer {
  width: 100%;
  height: 35px;
  display: flex;

  input {
    flex: 1;
    height: 100%;
    text-indent: 1rem;
  }

  button {
    width: 100px;
    height: 100%;
    margin-left: 5px;
  }
}
</style>
